<template>
  <div class="notice-page page">
    <nav-bar title="党建公告" theme="red" search message></nav-bar>
    <van-swipe :autoplay="3000" class="notice-swipe" v-if="bannerList.length !== 0">
      <van-swipe-item v-for="(image, index) in bannerList" :key="index">
        <img v-lazy="image" @click="$router.push('/notice/detail?noticeCode=' + noticeCodeList[index])" />
      </van-swipe-item>
    </van-swipe>
    <div class="notice-image" v-if="flag">
      <img src="~@/assets/images/notice/banner.png" />
    </div>
    <div class="notice-division"></div>
    <van-swipe :autoplay="3000" v-if="keyTitleList.length !== 0" :show-indicators="false">
      <van-swipe-item v-for="(item, index) in keyTitleList" :key="index">
        <div class="notice-keyTitle">
          <van-icon name="chat-o" size="14px" style="line-height: 46px" />
          <p class="notice-keyTitle-content">{{ item.noticeTitle }}</p>
          <p class="notice-keyTitle-date">{{ item.addTime }}</p>
          <p class="notice-keyTitle-button" @click="$router.push('/notice/detail?noticeCode=' + item.noticeCode)">
            <span class="notice-keyTitle-button-text">查看</span>
          </p>
        </div>
      </van-swipe-item>
    </van-swipe>

    <div class="notice-secant"></div>
    <div class="notice-type">
      <div
        class="notice-type-default"
        :class="{ 'notice-type-active': index === IndexInfo }"
        v-for="(item, index) in typeList"
        :key="index"
        @click="handleChangeType(index, item.code)"
      >
        {{ item.description }}
      </div>
    </div>
    <van-sticky class="page-scroll" :offset-top="44">
      <van-pull-refresh v-model="refreshing" style="min-height: 100%" @refresh="getList(1)">
        <template v-if="listData.length">
          <van-list
            v-model="loading"
            :finished="finished"
            :immediate-check="false"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            finished-text="没有更多了~"
            @load="getList"
          >
            <div
              class="notice-list"
              v-for="(item, index) in listData"
              :key="index"
              @click="$router.push('/notice/detail?noticeCode=' + item.noticeCode)"
            >
              <img :src="$config.ImageURl + item.bannerImg" v-if="item.bannerImg" />
              <img src="~@/assets/images/notice/bannerLeft.png" v-if="!item.bannerImg" />
              <div class="notice-list-textRight">
                <p class="notice-list-textRight-title">{{ item.noticeTitle }}</p>
                <div>
                  <span class="lefts">{{ item.addUser }}</span>
                  <span class="rights">{{ item.timeString }}</span>
                </div>
              </div>
            </div>
          </van-list>
        </template>
        <template v-else>
          <van-empty
            :image="require('@/assets/images/basic/pic_no_content.png')"
            description="暂无内容~"
            style="height: 300px"
          />
        </template>
      </van-pull-refresh>
    </van-sticky>
  </div>
</template>
<script>
import Public from '@/api/public'
import Notice from '@/api/notice'
import List from '@/mixins/list'
import { mapState } from 'vuex'
export default {
  mixins: [List],
  data() {
    return {
      typeList: [],
      IndexInfo: 0,
      api: Notice.noticeList,
      searchForm: {
        noticeType: '1',
        regionCode: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      },
      bannerList: [],
      keyTitleList: [],
      noticeCodeList: [],
      flag: false
    }
  },
  created() {
    this.init()
    this.searchForm.regionCode = this.user.regionCode
    this.getList()

    setTimeout(() => {
      this.getBanner()
      this.getKeyTitle()
    }, 500)
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  methods: {
    getBanner() {
      if (this.listData.length) {
        for (let i = 0; i < this.listData.length; i++) {
          if (this.listData[i].isBanner === '1') {
            this.bannerList.push(this.$config.ImageURl + this.listData[i].bannerImg)
            this.noticeCodeList.push(this.listData[i].noticeCode)
          }
          if (this.bannerList.length === 3) {
            break
          }
        }
      }
      if (this.bannerList.length === 0) {
        this.flag = true
      }
    },
    getKeyTitle() {
      if (this.listData.length) {
        for (let i = 0; i < this.listData.length; i++) {
          if (this.listData[i].isKeynotice === '1') {
            this.keyTitleList.push({
              addTime: this.listData[i].addTime,
              noticeTitle: this.listData[i].noticeTitle,
              noticeCode: this.listData[i].noticeCode
            })
          }
          if (this.keyTitleList.length === 5) {
            break
          }
        }
      }
    },
    // 点击类型字典项
    handleChangeType(index, code) {
      this.listData = []
      this.searchForm.noticeType = code
      this.IndexInfo = index
      this.getList()
    },
    // 类型字典项
    init() {
      Public.Init.init({
        type: 'noticeParty'
      }).then(res => {
        this.typeList = res.data.data.noticeParty
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/notice/list.less';
</style>
